import { useEffect, useState } from "react";
import { Toast,Dialog } from 'antd-mobile';
import { baseURL } from "../../utils/request";
import './index.scss'
import { getUserInfoAPI } from "../../apis/profile";
import { useNavigate } from "react-router-dom";
import { getToken, removeToken } from "../../utils/toke";
import { _clearUserInfo, fetchUserInfo } from "../../store/user";
import { useDispatch, useSelector } from "react-redux";
// 菜单数据
const menus = [
    { id: 1, name: '我的收藏', iconfont: 'icon-coll', to: '/favorate' },
    { id: 2, name: '我的出租', iconfont: 'icon-ind', to: '/rent' },
    { id: 3, name: '看房记录', iconfont: 'icon-record', to: '/' },
    { id: 4, name: '成为房主', iconfont: 'icon-identity', to: '/' },
    { id: 5, name: '个人资料', iconfont: 'icon-myinfo', to: '/' },
    { id: 6, name: '联系我们', iconfont: 'icon-cust', to: '/' }
]

// 默认头像
const DEFAULT_AVATAR = '/img/profile/avatar.png'
export default function Profile() {
    const navigate = useNavigate()
    const dispatch = useDispatch()
    // const [userInfo, setUserInfo] = useState({})
    // const [isLogin, setIsLogin] = useState(false)
    const userInfo = useSelector((state) => state.user.userInfo)
    // async function getUserInfo() {
        
    //     if (res.body) {
    //         setIsLogin(true)
    //     }
    // }
    useEffect(() => {
        // const token = getToken()
        // if(token){
        //     setIsLogin(true)
        // }
        dispatch(fetchUserInfo())
    }, [dispatch])
    const logout = () => {
        dispatch(_clearUserInfo())
        // setIsLogin(false)
        Toast.show({
            icon: 'success',
            content: '退出成功',
        })
        window.location.reload()
    }
    const toMy = (to) => {
        if(to === '/favorate' || to ==='/rent'){
            if(!userInfo){
                Dialog.show({
                    title: '提示',
                    content: '登录后才能查看信息，是否去登录?',
                    closeOnAction: true,
                    onAction: (action) => {
                        if (action.key === 'cancel') {
                            return
                        }
                        navigate('/login')
                    },
                    actions: [
                        [{
                            key: 'cancel',
                            text: '取消',
                        },
                        {
                            key: 'success',
                            text: '去登陆',
                            bold: true,
                            success: true,
                        }]
                    ]
                })
                return
            }
        }
        navigate(to)
    }
    return (
        <div className="profile">
            <div className="profile__title">
                <img
                    className='bg'
                    src={baseURL + '/img/profile/bg.png'}
                    alt="背景图"
                />
                <div className="info">
                    <div className="icon">
                        <img
                            className="avatar"
                            src={[baseURL,userInfo?.avatar || DEFAULT_AVATAR].join("")}
                            alt="icon"
                        />
                        <div className="user">
                            <div className="name">
                                {userInfo?.nickname || '游客'}
                                {userInfo ?
                                    <>
                                        <div className="auth">
                                            <span className="logout" onClick={logout}>退出</span>
                                        </div>
                                        <div className="edit">
                                            编辑个人资料
                                            <span className="arrow">
                                                <i className="iconfont icon-arrow" />
                                            </span>
                                        </div>
                                    </>
                                    :
                                    <div className="edit">
                                        <button onClick={() => navigate('/login')}>去登陆</button>
                                    </div>}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <ul className="profile__content">
                {menus.map((item) => (
                    <li className="menu__item" key={item.id}>
                        <div onClick={() => toMy(item.to)}>
                            <i className={['iconfont', item.iconfont].join(" ")} />
                            <span>{item.name}</span>
                        </div>
                    </li>)
                )}

            </ul>
            {/* 加入我们 */}
            <div className='ad'>
                <img src={baseURL + '/img/profile/join.png'} alt="" />
            </div>
        </div>
    )

}